<template>
  <el-dialog :title="type==='add'?'新增权限':'编辑权限' " :visible.sync="showDialog" width="500px" @close="close">
    <el-form ref="permissionRef" :model="permissionform" label-width="120px" :rules="rules">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="permissionform.name" autocomplete="off" size="small" style="width: 80%" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="permissionform.code" autocomplete="off" size="small" style="width: 80%" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model="permissionform.description" autocomplete="off" size="small" style="width: 80%" type="textarea" :rows="4" />
      </el-form-item>
      <el-form-item label="开启" prop="enVisible">
        <el-switch
          v-model="permissionform.enVisible"
          active-color="#13ce66"
          inactive-color="#f3f3f3"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="onSubmit">确认提交</el-button>
        <el-button size="small" @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { addpermission, getpermissionList, updatepermission } from '@/api/permission'
export default {
  data() {
    return {
      showDialog: false,
      permissionform: {
        name: '',
        code: '',
        description: '',
        enVisible: false,
        type: null,
        pid: null
      },
      rules: {
        name: [
          { required: true, message: '请输入权限名称', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.type === 'edit') {
                this.permissionList = this.permissionList.filter(item => item.name !== value)
              }
              if (this.permissionList.some(item => item.name === value)) {
                callback(new Error('权限名称已存在'))
              } else {
                callback()
              }
            }
          }
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.type === 'edit') {
                this.permissionList = this.permissionList.filter(item => item.code !== value)
              }
              if (this.permissionList.some(item => item.code === value)) {
                callback(new Error('权限标识已存在'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      permissionRef: null,
      permissionList: [],
      type: ''
    }
  },
  created() {
    this.getpermissionList()
  },
  methods: {
    close() {
      this.showDialog = false
      this.$refs.permissionRef.resetFields()
      this.permissionform = {
        name: '',
        code: '',
        description: '',
        enVisible: '0',
        type: null,
        pid: null
      }
    },
    open(type, parentNode) {
      this.showDialog = true
      console.log(type, parentNode)
      this.type = type
      if (type === 'add') {
        this.permissionform.pid = parentNode.id
        this.permissionform.type = 2
      } else if (type === 'edit') {
        this.permissionform = { ...parentNode }
      }
    },
    async getpermissionList() {
      this.permissionList = await getpermissionList()
    },
    async onSubmit() {
      await this.$refs.permissionRef.validate()
      console.log(this.permissionform)
      if (this.type === 'add') {
        await addpermission(this.permissionform)
        this.$message.success('添加成功')
        this.close()
        this.$emit('refresh')
      } else if (this.type === 'edit') {
        // console.log('编辑')
        await updatepermission(this.permissionform)
        this.$message.success('修改成功')
        this.close()
        this.$emit('refresh')
      }
    }
  }
}
</script>

<style>

</style>
